<template>
	<view class="main-content">
		<view class="search">
			<view>
				<image :src="baseImgUrl+'home/search.png'" mode="widthFix"></image>
				<input type="text" placeholder="搜索维保计划" v-model="planName" />
				<text @click="search">搜索</text>
			</view>
		</view>
		<scroll-view scroll-y :style="{height: scrollHeight}" class="list-box" @scrolltolower="loadMore">
			<view v-for="(item,index) in itemList" :key="index" class="list-item">
				<view class="status-show">
					<text>{{timestampToDate(item.createTime, 'ymd')}}</text>
					<view class="status">
						<text style="color: #0000ff" v-if="item.execStatus == 1">进行中</text>
						<text style="color: #00aa00" v-else-if="item.execStatus == 2">已提交</text>
						<text style="color: #FF8A00" v-else-if="item.execStatus == 3">审核中</text>
						<text style="color: #ff0000" v-else-if="item.execStatus == 4">驳回</text>
						<text style="color: #ff55ff" v-else-if="item.execStatus == 5">已维保</text>
						<text style="color: #28C445" v-else-if="item.execStatus == 6">已完成</text>
						<text style="color: #325EF5;" v-else>待开始</text>
					</view>
					<!-- <text class="status" :style="{color:item.execStatus == 0 ?'#325ef5':'#28c445'}">
						{{forrmatterEnmu(Dictionary.wbStatus, item.execStatus)}}</text> -->
				</view>
				<view class="title">
					<text>{{item.planStartDate|timeFormatter}}</text>
					<text>•</text>
					<text>{{item.planName}}</text>
				</view>
				<view class="type">{{forrmatterEnmu(Dictionary.wbPlanType, item.planType)}}</view>
				<view class="download">
					<text class="company">{{item.wbCompanyName}}</text>
					<view style="display: flex;justify-content: flex-end;">
						<view class="download-btn" style="margin-right: 10rpx;" v-if="item.execStatus >=5 " @click="previewHandler(item)">
							预览
						</view>

						<view class="download-btn" @click="getSetting(item)" v-if="item.execStatus == 5">
							去下载
						</view>
						<view class="download-btn" v-if="item.execStatus == 6">
							已下载
						</view>
					</view>
				</view>
			</view>
			<view class="list_loading" v-if="isAllData != 0">
				<view class="loading" v-if="isAllData == '1'">
					正在加载，请稍候
					<uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
				</view>
				<view class="all-data" v-else>已加载全部数据~</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Mine from '@/api/mine.js'
	import {
		timestampToDate,
		forrmatterEnmu
	} from '@/utils/index.js'
	import Dictionary from '@/utils/dictionary.js'
	import Common from '@/api/common.js'
	import {
		baseUrl,
		baseImgUrl
	} from '@/config'
	export default {
		data() {
			return {
				Dictionary,
				baseUrl,
				baseImgUrl,
				planName: "",
				itemList: [],
				total: 0,
				pageInfo: {
					pageNum: 1,
					pageSize: 10
				},
				isAllData: '0',
				scrollHeight: ''
			}
		},
		onLoad(e) {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 54 + 'px';
			console.log(e)
		},
		onShow() {
			this.listChange()
		},
		filters: {
			timeFormatter(value) {
				if (!value || value == '') return '';
				let arr = value.split("-");
				return arr[0] + '年' + arr[1] + '月';
			}
		},
		methods: {
			timestampToDate,
			forrmatterEnmu,
			getStatusLabel(list, status) {
				let index = list.findIndex(ele => ele.name == status);
				return index > -1 ? list[index].label : '';
			},
			listChange() {
				this.isAllData = '1';
				Mine.getPlanList({
					planName: this.planName,
					...this.pageInfo
				}).then(res => {
					this.itemList = res.rows
					// this.itemList = [{
					// 	createTime: '111',
					// 	execStatus: 5,
					// 	wbCompanyName: 111
					// }]
					this.total = res.total;
					let {
						pageNum,
						pageSize
					} = this.pageInfo;
					if (pageNum >= this.total / pageSize) {
						this.isAllData = '2';
					} else {
						this.isAllData == '0';
					}
				})
			},
			search() {
				this.itemList = [];
				this.total = 0;
				this.pageInfo = {
					pageNum: 1,
					pageSize: 10
				};
				this.listChange();
			},
			loadMore() {
				let {
					pageNum,
					pageSize
				} = this.pageInfo;
				if (pageNum >= this.total / pageSize) {
					this.isAllData = '2';
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum + 1);
				this.getNewList();
			},
			// download(item) {
			// 	wx.downloadFile({
			// 		url: 'http://192.168.1.16:8088/test/download',
			// 		success(res) {
			// 			// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
			// 			if (res.statusCode === 200) {
			// 				wx.playVoice({
			// 					filePath: res.tempFilePath
			// 				})
			// 			}
			// 		}
			// 	})
			// }
			saveImageToAlbum(filePath, id) {
				let _this = this
				uni.downloadFile({
					url: filePath,
					success(res) {
						// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
									Common.updateWpPlan({
										planId: id
									}).then(res => {
										_this.listChange()
									})
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
								}
							});
						}
					}
				})
			},
			getSetting(item) {
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							// 用户未授权，向用户发起授权请求
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: (res) => {
									// 用户同意授权，继续保存图片
									this.saveImageToAlbum(item.examiningReport, item.id);
								},
								fail: () => {
									// 用户拒绝授权，提示用户开启权限
									uni.showModal({
										title: '提示',
										content: '需要您授权保存图片到相册',
										success: (result) => {
											if (result.confirm) {
												// 引导用户去设置页面开启权限
												uni.openSetting();
											}
										}
									});
								}
							});
						} else {
							// 用户已授权，直接保存图片
							console.log(22222, '用户已授权，直接保存图片');
							this.saveImageToAlbum(item.examiningReport, item.id);
						}
					}
				});
			},

			// 预览
			previewHandler(item) {
				uni.navigateTo({
					url: `/subPages/home/preview?type=${item.planType}&id=${item.id}`
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.main-content {
		width: 100%;
		height: 100%;

		.search {
			padding: 20rpx 30rpx;
			background: #ffffff;

			>view {
				display: flex;
				align-items: center;
				padding: 14rpx 20rpx;
				background: #f2f2f2;
				border-radius: 40rpx;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 28rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}

				input {
					width: calc(100% - 140rpx);
					font-size: 28rpx;
				}

				text {
					padding: 4rpx 4rpx 4rpx 20rpx;
					border-left: 2rpx solid #325ef5;
					color: #325ef5;
				}
			}
		}

		.list-box {
			padding: 20rpx 30rpx;

			.list-item {
				background: #ffffff;
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.status-show {
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;

					&:last-child {
						margin: 0;
						margin-top: 20rpx;
					}

					>text {
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;

						&:nth-of-type(1) {
							opacity: 0.4;
						}

						&:nth-of-type(2) {
							color: #325ef5;
						}
					}

					.status {
						font-size: 28rpx;
						font-weight: 500;
					}
				}

				.title {
					text {
						font-size: 28rpx;
						font-style: normal;
						font-weight: bold;
						color: $main-font-black;
						line-height: 40rpx;
					}

					margin-bottom: 10rpx;
				}

				.type {
					display: block;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					color: #325ef5;
					margin-bottom: 20rpx;
				}

				.download {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.company {
						display: flex;
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 40rpx;
						opacity: 0.4;
						margin-bottom: 10rpx;
					}

					.download-btn {
						padding: 10rpx 30rpx;
						border-radius: 10rpx;
						border: 2rpx solid #325ef5;
						color: #325ef5;
						font-family: "PingFang SC";
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
					}
				}
			}
		}
	}
</style>